<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js增加按钮</title>
</head>
<body>
<div id="div-id">
    <ul class="sectlevel1">
        <li>1. 页面目录
            <ul class="sectlevel2">
                <li>1.1.用户获取请求
                    <ul class="sectlevel3">
                        <li>1.1.1. 请求curl</li>
                        <li>1.1.2. 请求curl</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>2. 这是标题</li>
        <li>3. 通用返回对象</li>
        <li>4. 用户测试
            <ul class="sectlevel2">
                <li>4.1. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.1.1. 请求curl</li>
                        <li>4.1.2. 请求curl</li>
                    </ul>
                </li>
                <li>4.2. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.2.1. 请求curl</li>
                        <li>4.2.2. 请求curl</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script>
    const menuId = "div-id";
    window.onload = function () {
        const catalog = document.getElementById(menuId);
        console.log(catalog)
        addGlobBt(catalog)
        const childs = catalog.getElementsByTagName("ul");
        for (let i = 0; i < childs.length; i++) {
            const liList = childs[i].childNodes;
            for (let j = 0; j < liList.length; j++) {
                if (liList[j].tagName === "LI") {
                    addEvent(liList[j]);
                }
            }
        }
    }

    function addEvent(o) {
        let as = o.firstChild;
        if (o.children.length === 0) {
            return
        }
        let imgEl = getEleI("block");
        o.insertBefore(imgEl, as)
        imgEl.onclick = function (e) {
            const theEvent = window.event || e;
            const link = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
            const parentNode = link.parentNode;
            const uls = parentNode.childNodes;
            let disStr = " "
            for (let i = 0; i < uls.length; i++) {
                const childEl = uls[i]
                if (childEl.tagName === "UL") {
                    if (childEl.style.display === "none") {
                        childEl.style.display = "block";
                        disStr = "block";
                    } else {
                        childEl.style.display = "none";
                        disStr = "none";
                    }
                }
            }
            const imgEl = parentNode.firstChild;
            if (disStr === "block") {
                imgEl.src = 'down.svg'
            } else if (disStr === 'none') {
                imgEl.src = 'up.svg'
            }
        }
    }

    function getEleI(str) {
        let resultI = document.createElement("img")
        // margin: 0.3rem 0.2rem 0 0.2rem;
        // padding-top: 0.1rem;
        resultI.style.cssText = '--color: inherit;height: 1rem;width: 1rem;line-height: 1rem;display: inline-flex;justify-content: center;align-items: center;position: relative;fill: currentColor;color: var(--color);font-size: inherit;';
        resultI.className = "menu-operator-i"
        // resultI.innerText = "收"
        if (str === 'block') {
            resultI.src = 'down.svg'
        } else {
            resultI.src = 'up.svg'
        }
        return resultI
    }

    function addGlobBt(catalog) {
        let resultI = document.createElement("p")
        catalog.insertBefore(resultI, catalog.firstChild)
        let op = document.createElement("button")
        let cl = document.createElement("button")
        resultI.appendChild(op)
        resultI.appendChild(cl)
        cl.innerText = "全部收起"
        cl.onclick = function () {
            for (let child of document.getElementById(menuId).getElementsByTagName("ul")) {
                if (child.tagName === "UL" && child.className !== 'sectlevel1') {
                    const imgEl = child.parentNode.firstChild;
                    imgEl.src = 'up.svg'
                    child.style.display = "none";
                }
            }
        }

        op.innerText = "全部展开"
        op.onclick = function () {
            for (let child of document.getElementById(menuId).getElementsByTagName("ul")) {
                if (child.tagName === "UL" && child.className !== 'sectlevel1') {
                    const imgEl = child.parentNode.firstChild;
                    imgEl.src = 'down.svg'
                    child.style.display = "block";
                }
            }
        }
    }
</script>
</html>